import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { AtModal, AtModalContent, AtModalAction, AtToast } from "taro-ui"
import { post } from "../../service/api"
import './index.scss'

class Collect extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      list: [],
      isShowModal: false,
      isShowToast: false,
      allChoose: false,
      total: 0,
      id: []
    }
  }
  config = {
    navigationBarTitleText: '我的收藏',
  }
  async getList() {
    const { data } = await post('favorite/findPage');
    if (data.code == 0) {
      this.setState({
        list: data.rows.map(item => { item.checked = false; return item }),
        total: data.total
      }, () => {
        console.log(this.state.list)
      })

    }
  }
  async delCollect(id) {
    const { data } = await post('favorite/addupdate', {
      targetId: id,
      crudType: "delete"
    })
    if (data.code == 0) {
      this.getList()
      this.setState({
        isShowModal: false,
        isShowToast: true,
        allChoose: false
      }, () => {

        setTimeout(() => {
          this.setState({
            isShowToast: false
          })
        }, 1500);
      })
    }
  }
  handleItem(item) {
    let list = this.state.list;
    let bol = true;
    list.forEach(i => {
      if (i._id == item._id) {
        i.checked = !i.checked;
      }
      if (!i.checked) {
        bol = false
      }
    })
    this.setState({
      list: list,
      isShowToast: false,
      allChoose: bol
    })
  }
  clear() {
    let list = this.state.list;
    list.forEach(i => {
      i.checked = false;
    })
    this.setState({
      list: list,
      isShowToast: false,
      allChoose: false
    })
  }
  delItem() {
    let bol = false;
    this.state.list.forEach(item => {
      if (item.checked) {
        bol = true
      }
    })
    if (bol) {
      this.setState({
        isShowModal: true
      })
    }
  }
  onCancel() {
    this.setState({
      isShowModal: false
    })
  }
  onConfirm() {
    let { list, id } = this.state;
    id = list.filter(item => item.checked).map(item => { return item._id });
    this.delCollect(JSON.stringify(id))
  }
  handleAll() {
    let list = this.state.list;
    let bol = !this.state.allChoose;
    list.forEach(item => {
      item.checked = bol
    })
    this.setState({
      list: list,
      allChoose: bol
    })
  }
  componentDidMount() {
    this.getList()
  }
  render() {
    const { list, allChoose } = this.state;
    return (
      <View className='collect-box'>
        <View className="d-list">
          {list.map((item, index) => {
            return (
              <View className="d-item"
                key={item._id}
                onClick={this.handleItem.bind(this, item)}
              >
                <Image className={item.checked ? "img-logo opacity" : "img-logo"} src={item.logo} />
                <Image className={item.checked ? "checkbox" : "checkbox-none"} src={require('../../asset/imgs/xz2.png')} />
                <View className="qj">360°全景</View>
                <View className="d-item-txt">
                  <View className="d-item-title">{item.title}</View>
                  <View className="area">
                    <Image className="img" src={require('../../asset/imgs/mj.png')} /> <Text className="area-num">{item.acre}㎡</Text>
                    <Image className="img" src={require('../../asset/imgs/ys.png')} /> <Text>{item.sum / 10000}万</Text>
                  </View>
                </View>
              </View>
            )
          })}
        </View>
        <View className="handle-box">
          <View className="btn-all-choose" onClick={this.handleAll.bind(this)}>
            <Image className={!allChoose ? "img" : "none"} src={require('../../asset/imgs/oddk.png')} />
            <Image className={allChoose ? "img" : "none"} src={require('../../asset/imgs/oddz.png')} />
            全选
          </View>
          <View className="handle-item">
            <View className="btn-cancel" onClick={this.clear.bind(this)}>取消</View>
            <View className="btn-confirm" onClick={this.delItem.bind(this)}>删除</View>
          </View>
        </View>
        <AtModal isOpened={this.state.isShowModal}>
          <AtModalContent>
            <View className="modal-content">是否确认删除选中的收藏 ？</View>
          </AtModalContent>
          <AtModalAction>
            <Button className="cancel" onClick={this.onCancel.bind(this)}>取消</Button>
            <Button className="confirm" onClick={this.onConfirm.bind(this)}>确定</Button>
          </AtModalAction>
        </AtModal>
        <AtToast
          isOpened={this.state.isShowToast}
          text="删除成功"
          duration={2000}
        ></AtToast>
      </View>
    )
  }
}

export default Collect
